<template>
  <el-upload :class="{hide_box: upload_btn}" v-model:file-list="fileList" list-type="picture-card" :action="submerchantApi().upload"
    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-preview="handlePictureCardPreview"
    :on-change="handleChange"
    :limit="1">
    <el-icon>
      <Plus />
    </el-icon>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script lang="ts" setup>
import { Plus } from '@element-plus/icons-vue'
import { UploadProps, UploadUserFile, ElMessage } from 'element-plus'
import { ref } from 'vue';
import { submerchantApi } from '/@/api/adv/submerchant'

// const props = defineProps({
//     funData:{
//       type:String,
//       default:()=>''
//     }
// })

const emit = defineEmits(['returnPicId']);

const upload_btn = ref()
const fileList = ref<UploadUserFile[]>([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response
) => {
  emit('returnPicId', response.data.map.dinpay.map.response.map.media_id);
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type.indexOf('image') == -1) {
    ElMessage.error('请上传正确图片格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error('图片不能超过 10MB!')
    return false
  }
  return true
}
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
const handleChange = async () => {
  upload_btn.value = true
}
</script>
<style>
.hide_box .el-upload--picture-card {
  display: none;
}
</style>